<template>
  <el-container style="padding: 20px;">
     <el-aside width="200px">
       <el-menu
         default-active="1"
         class="el-menu-vertical-demo"
         @select="handleSelect">
         <el-menu-item index="1"><i class="el-icon-document"></i> 订单信息</el-menu-item>
         <el-menu-item index="2"><i class="el-icon-location"></i> 收货地址</el-menu-item>
         <el-menu-item index="3"><i class="el-icon-user"></i> 个人资料</el-menu-item>
       </el-menu>
     </el-aside>
 
     <el-main>
       <div v-if="activeIndex === '1'">
         <h2>订单信息</h2>
         <el-table :data="orderData">
           <el-table-column prop="orderNumber" label="订单号" />
           <el-table-column prop="date" label="日期" />
           <el-table-column prop="status" label="状态" />
         </el-table>
       </div>
 
       <div v-if="activeIndex === '2'">
         <h2>收货地址</h2>
         <el-input placeholder="请输入收货地址"></el-input>
         <el-button type="primary" style="margin-top: 10px;">保存</el-button>
       </div>
 
       <div v-if="activeIndex === '3'">
         <h2>个人资料</h2>
         <el-form :model="profile">
           <el-form-item label="姓名">
             <el-input v-model="profile.name"></el-input>
           </el-form-item>
           <el-form-item label="邮箱">
             <el-input v-model="profile.email"></el-input>
           </el-form-item>
           <el-form-item label="电话">
             <el-input v-model="profile.phone"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="saveProfile">保存</el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-main>
   </el-container>
 
 </template>
 
 <script>
 
 
 export default {
   data() {
     return {
        activeIndex: '1',
       orderData: [
         { orderNumber: '123456', date: '2023-09-01', status: '已发货' },
         { orderNumber: '123457', date: '2023-09-02', status: '待发货' },
       ],
       profile: {
         name: '',
         email: '',
         phone: '',
       }
     };
   },
   components: {
   
   },
   methods: {
      handleSelect(index) {
       this.activeIndex = index;
     },
     saveProfile() {
       // 保存个人资料的逻辑
       console.log('Profile saved:', this.profile);
     }
   },
 };
 </script>
 
 <style  >
 .el-menu-vertical-demo {
   min-height: 500px;
 }
 </style>